<template>
  <div>
    <div class="leftSideBar">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="runApp(item)">
          {{ item.text }}
        </li>
      </ul>
    </div>
    <div id="debug-info"></div>
    <div id="content"></div>
  </div>
</template>

<script>
import "./styles/global.css";
const PIXI = require("pixi.js");
import _00Test from "./_00Test.ts";
import _01Draw from "./_01Draw.ts";

export default {
  name: "App",
  data() {
    return {
      list: [
        { text: "00Test1", app: _00Test },
        { text: "01Draw", app: _01Draw },
      ],
      current: null,
    };
  },
  created() {
    let type = "WebGL";
    if (!PIXI.utils.isWebGLSupported()) {
      type = "canvas";
    }
    PIXI.utils.sayHello(type);
  },

  methods: {
    runApp(item) {
      if (item.app == this.current) {
        return;
      }
      if (this.current) {
        this.current.destory();
      }
      console.log(item.text);
      const content = this.$el.children["content"];
      if (content.hasChildNodes()) {
        content.removeChild(content.children[0]);
      }

      const can = item.app.create();
      content.appendChild(can);

      item.app.start();
      this.current = item.app;
    },
  },
  components: {},
};
</script>

<style scoped>
.leftSideBar {
  background-color: #dddddd;
  position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/
  height: 95%;
  width: 200px;
  border: 1px solid black;
  overflow: auto;
}

.leftSideBar li {
  color: black;
  text-decoration: underline;
}

.leftSideBar li:hover {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

#content {
  height: 95%;
  margin-left: 203px;
  background-color: #ffffff;
  border: 2px solid aqua;
  padding: 2px;
  min-width: 200px;
}
#debug-info {
  position: absolute;
  left: 213px;
  top: 10px;
}
</style>
